Skip to main content

yInput

yinput

Description​

The YInput is an element that allows user input. This YInput can be furhter used for example for:

Basic Structure​

In the following the basic structure of the YInput shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

yinput

The YInput as seen above contains a label and a helper text.

Label​

The label contains the text inside the button. It is on the right side of the component. By changing the inner padding of the button, the label gets moved too. You can find further explanation at the Label Property.

Helper Text​

The Helper Text is similar to the label and displays a hint related to the input that will be expected. In certain situations the helper text will be replaced by a warning or error text, which can either be set through the automatic validation or custom scripts.

Properties​

Through its various properties the YInput can be configured to suit your needs. The display below provides you with an overview of all the YInput properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
---y-input__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
---y-input__component-type

The type of the component. For this component it is y-input.

Name: name
String Property
---y-input__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
---y-input__version

The custom version of the Input-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
---y-input__core-theme

The CoreTheme, which will be apllied to the Input. For further information on themes visit the themes page.

Name: subTheme
String Property
---y-input__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Input. For further information on themes visit the themes page.

Name: groupTheme
String Property
---y-input__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
---y-input__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
---y-input__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
---y-input__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
---y-input__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
---y-input__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
---y-input__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
---y-input__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
---y-input__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
---y-input__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
---y-input__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
---y-input__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
---y-input__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
---y-input__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
---y-input__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
---y-input__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
---y-input__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
---y-input__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
---y-input__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the YInput in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Input Elevated
Input Flat
Input Outlined
Input Rounded
Input Plain
genericsizeminWidth200px
genericsizemaxHeight44px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
stylelabellabel__fontColor__normal#FFFFFF
stylehinthint
styleindicatorindicator__height0px

Special Variations​

Beyond standard configurations, the YInput allows for advanced customization. Tailor the component for specific needs like user feedback forms with character limits or code input areas with monospace font styling.

Input Numeric Context
Input Textual Context
Input Clean
Input Prefix Suffix
Input Prefix Icon
genericsizeminWidth200px
genericsizemaxHeight44px
stylelabellabel'Enter amount'
styleplaceholderplaceholder'e.g., 100'
stylecontentvalue'100'
stylehinthint'Numeric values only'
stylecontentcontent__fontAlign'right'
stylebackgroundbgColor__normal#ECEFF1
styleborderborderStyleTop__normalsolid
styleborderborderStyleRight__normalsolid
styleborderborderStyleBottom__normalsolid
styleborderborderStyleLeft__normalsolid
styleborderborderWidthTop__normal2px
styleborderborderWidthRight__normal2px
styleborderborderWidthBottom__normal2px
styleborderborderWidthLeft__normal2px
styleborderborder-colorTop__normal#CFD8DC
styleborderborder-colorRight__normal#CFD8DC
styleborderborder-colorBottom__normal#CFD8DC
styleborderborder-colorLeft__normal#CFD8DC
stylecontenttype'number

Mask and Validation​

In the component > validation group you will find the mask and validate properties. Mask is the value to be used for the inbuilt maska and validate an option to add custom validation to the input.

Incorporating Maska into our input component allows for the creation of input masks using strings, enabling the enforcement of specific formats for data entry such as telephone numbers and birthdays. To define a mask, simply provide a string that represents the desired format. For example, a mask for a german telephone number could be defined as '+49 (###) ###-####', where # represents a digit placeholder. This ensures that users input their telephone numbers in a consistent and predefined format, enhancing data uniformity and reducing entry errors.

Additionally, our component features a validation picker accessible via a plus icon, allowing for the addition of custom validation conditions. Within this picker, you can specify a comparator (e.g., equals, not equal, greater than, etc.), a value to compare against, and a custom error message to display in case the validation fails. This error message is displayed in place of the usual hint, providing immediate and clear feedback to the user regarding the nature of the input error. This functionality not only enhances the robustness of data validation but also improves the user experience by guiding users towards correct data entry.

In the following you can see an example of the validation group.

Input Validation

Debounce​

The debounce function which can be found in the component > misc group is a powerful feature designed to enhance the performance and user experience of applications by controlling how frequently a function can be executed. This is particularly useful in scenarios where you have events that trigger rapidly or continuously, such as during typing in a search field or resizing a window. By implementing a debounce function, you can set a delay (in milliseconds) that determines how long the system should wait after the last event trigger before executing the function. If a new event occurs before the delay has elapsed, the timer resets. This effectively reduces the number of times the function is called, minimizing unnecessary computations and API calls.

How to:

  1. Open the Detail Panel and proceed to "Component", unfold "Misc" to modify "Debounce".

For example, when applied to an input field for live search, debounce can ensure that the search query is sent to the server only after the user has stopped typing for a specified duration, rather than sending a request with every keystroke. This not only reduces the load on the server but also provides a smoother experience for the user.

In the documentation below, you'll find a code example that can be used together with the debounce function.

Custom Validation​

Input EvtChanged
// function onInput_1_EvtChanged (apiObject, component, eventData) {

const userName = eventData.data.trim();

if (userName.length < 3) {
  alert("The username must be at least 3 characters long.");
  return false;
} else if (/[^a-zA-Z0-9]/.test(userName)) {
  alert("The username can only contain alphanumeric characters.");
  return false;
}

console.log("Username is valid.");
return true;
//}

Special Toolbars​

The label and the main body of the YInput component utilize the default Toolbar, as outlined on the Toolbar documentation page. This includes all standard settings for modifying appearance, behavior, and content properties. Additionally, this Toolbar is enhanced with a SourceLink Picker feature, offering the ability to establish dynamic links between the YInput and other components or data sources within your application. This functionality is crucial for creating responsive, data-driven interfaces.

Specialized Detail Panel for Hint and Helper Text​

Both the hint and the helper text elements of the YInput component are associated with a specialized version of Detail Panel. This unique Toolbar simplifies the customization process, focusing on two key aspects:

  • State Picker
    Allows you to navigate through various states of the YInput component, such as hover, active, focused, etc. This feature is instrumental in designing a user interface that reacts intuitively to user interactions, providing visual feedback that enhances the overall user experience. @note Link needed
  • Text-Font Picker
    As described on the Toolbar documentation page, the Text-Font Picker enables detailed customization of the text appearance within the hint and helper text elements. This includes adjustments to font size, weight, style, and color, ensuring that these textual elements are both aesthetically pleasing and aligned with the application's design standards. @note Link needed

Special Picker​

There is a special picker for the YInput in the Toolbar as a Toolbar Extension which will be used to link the component to a logic of 2 or more other components. This is a kind of SourceLink Picker, similar to other SourceLink Pickers to be found in other components.